/**
 * Created by fangshufeng on 2018/4/23.
 */

import  React from 'react'
import {Tag, Button, Popconfirm} from 'antd';
import {LineView} from '../component'

import  {connect} from 'react-redux';
import {withRouter} from 'react-router-dom'

class HeadView extends React.Component {
    render() {
        const {height} = this.props.style;
        // console.log(height);
        return <div style={{height: height}}>
            <div style={{...style.containerStyle,...this.props.style}}>
                <div style={style.imgContainer}><img src={require("./img/logo2.png")} alt="logo"
                                                     style={style.imgContainer.img}/></div>
                <div style={style.titleContainer}><h1>接口Mock工具</h1></div>
                <div style={style.rightContainer}>
                    <div>当前环境：<Tag color="geekblue">{this.props.current_env_tag}</Tag> 关联码：<Tag
                        color="geekblue">{this.props.socketID}</Tag></div>
                    <Popconfirm title={<div>切换环境须知:<br/><br/>如果你的<span style={{color: 'red'}}>手机</span>处于<span
                        style={{color: 'red'}}>登录</span>状态请切换环境后<span style={{color: 'red'}}>重新登录</span></div>}
                                okText="朕知道了" cancelText="退下"
                                onConfirm={()=>this.props.history.push('/mockTool/envSelect')}
                    >
                        <Button type="dashed" style={style.rightContainer.btnStyle}>更新当前mock环境</Button>
                    </Popconfirm>
                </div>
            </div>
            <LineView style={style.lineStyle}/>
        </div>;
    }
}

const widthR = '33%';
const style = {
    containerStyle: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    imgContainer: {
        img: {
            width: 210,
            height: 60
        },
        width: widthR,
        marginLeft: 40
    },

    titleContainer: {
        width: widthR,
        textAlign: 'center'
    },
    rightContainer: {
        width: widthR,
        height: 60,
        marginRight: 40,
        textAlign: 'right',
        btnStyle: {
            marginTop: 10
        }
    },
    lineStyle: {
        marginRight: 10,
        marginLeft: 10
    }
};

export default withRouter(connect(status=>status.app)(HeadView));